<template>
    <div class="app-container">
        <FilterForm
            :data="filterData"
            @search="filterSearch"
            ref="FilterForm"
            labelWidth="88px"
        />
        <el-row :gutter="10" class="opr-btn-group mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['woodSupplier:woodSupplierCategory:add']"
                    >新增</el-button
                >
            </el-col>   
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['woodSupplier:woodSupplierCategory:edit']"
                    >修改</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['woodSupplier:woodSupplierCategory:remove']"
                    >删除</el-button
                >
            </el-col>
        </el-row>

        <Table
            :api="$Api.supplier.sort.list"
            ref="Table"
            :selection="true"
            @select="handleSelectionChange"
            height="60vh"
        >
            <el-table-column label="编号" prop="basicsId" />
            <el-table-column label="供应商类别" prop="basicsName" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click.native.stop="handleUpdate(scope.row)"
                        v-hasPermi="['woodSupplier:woodSupplierCategory:edit']"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click.native.stop="handleDelete(scope.row)"
                        v-hasPermi="[
                            'woodSupplier:woodSupplierCategory:remove',
                        ]"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </Table>

        <!-- 添加或修改供应商类别对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="500px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="数据名称" prop="basicsName">
                    <el-input
                        v-model="form.basicsName"
                        placeholder="请输入数据名称"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "WoodSupplierCategory",
    data() {
        return {
            filterData: [
                {
                    label: "供应商类别",
                    name: "basicsName",
                },
            ],
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                basicsName: [
                    {
                        required: true,
                        message: "请输入供应商名称",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {},
    methods: {
        /** 查询供应商类别列表 */
        filterSearch(params) {
            this.$refs.Table.getData(params);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                basicsId: null,
                basicsName: null,
                basicsType: null,
            };
            this.resetForm("form");
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.basicsId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
  
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加供应商类别";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const basicsId = row.basicsId || this.ids;
            this.$Api.supplier.sort.detail(basicsId).then((res) => {
                this.form = res.data;
                this.open = true;
                this.title = "修改供应商类别";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.basicsId != null) {
                        this.$Api.supplier.sort.update(this.form).then(
                            (res) => {
                                let { code } = res;
                                if( code == 200) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.filterSearch();
                                }
                            }
                        );
                    } else {
                        this.$Api.supplier.sort.add(this.form).then((res) => {
                            let { code } = res;
                            if( code == 200) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.filterSearch();
                            }
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const basicsIds = row.basicsId || this.ids;
            this.$confirm(
                '是否确认删除供应商类别编号为"' + basicsIds + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
            .then( ()=>{
                this.$Api.supplier.sort.del(basicsIds)
                .then( (res)=>{
                    let { code } = res;
                    if( code == 200 ) {
                        this.filterSearch();
                        this.msgSuccess("删除成功");
                    }
                })
            }).catch( ()=>{})

        },
    },
};
</script>
